<template>
    <div class="fx" :style="{'height':height-50+'px'}" style="background: #e7e9ee;">
    	
    	<div style="background: #fff;">
    		<div class="fx_top clear2" ref='fxtop'>
	    		<div class="fx_topd1" @click="jump(2,'最新用户')">
	    			<img src="../../../../static/img/images/fx1.jpg" />
	    			最新用户
	    		</div>
	    		<div class="fx_topd1" @click="jump(3,'实名用户')">
	    			<img src="../../../../static/img/images/fx2.jpg" />
	    			实名用户
	    		</div>
	    		<div class="fx_topd1" @click="jump(1,'VIP会员')">
	    			<img src="../../../../static/img/images/fx5.jpg" />
	    			VIP会员
	    		</div>
	    		<div class="fx_topd1" @click="jump(4,'同城老乡')">
	    			<img src="../../../../static/img/images/fx3.jpg" />
	    			同城老乡
	    		</div>
	    		<div class="fx_topd1" @click="jump(5,'海外用户')">
	    			<img src="../../../../static/img/images/fx4.jpg" />
	    			海外用户
	    		</div>
	    	</div>
    	</div>
    	<div class="fx_img" :style="{'height':height2+'px'}">
    		<div class="fx_imgd">
    			<div class="fx_imgd2">
					<div class="fx_imgof" :class="{'zuoimg':zuoshow,'zuoimg2':zuoshow2,'zuoimg3':zuoshow3}" @click="jump2">
	    				<img :src="datalist[0].head_img_s" :style="{'height':height3+'px'}" />
	    				<div class="fx_imgd3 flex align_center justify_cen">
	    					<p>{{datalist[0].username}}</p>
	    					<span :class="datalist[0].is_code==0?'hui':''">实名</span>
	    				</div>
	    				<div class="fx_imgd4 flex align_center justify_cen">
	    					{{datalist[0].age}}
							<i>|</i> {{datalist[0].height}}cm
							<i>|</i> {{datalist[0].education}}
							<i>|</i> {{datalist[0].place}}
							
	    				</div>
	    				
	    			</div>
	    			<div style="border-radius: 1rem;overflow: hidden;background: #fff;border: 1px solid #dbdbdf;border-radius: 1rem;">
	    				<img :src="datalist[1].head_img_s" :style="{'height':height3+'px'}" />
	    				<div class="fx_imgd3 flex align_center justify_cen" ref='fxbody1'>
	    					<p>{{datalist[1].username}}</p>
	    					<span :class="datalist[1].is_code==0?'hui':''">实名</span>
	    				</div>
	    				<div class="fx_imgd4 flex align_center justify_cen" ref='fxbody2'>
	    					{{datalist[1].age}}岁
							<i>|</i> {{datalist[1].height}}cm
							<i>|</i> {{datalist[1].education}}
							<i>|</i> {{datalist[1].place}}
							
	    				</div>
	    			</div>
	    			<div ref='fxbody3'>
	    				<img src='../../../../static/img/images/fx7.jpg' style='width:100%' />
	    			</div>
    			</div>
    		</div>
    		<div class="fx_img2 flex justify_cen" ref='fxbody4'>
	    		<a @click="zuo" v-if='!zuoshow2'><img src="../../../../static/img/images/fx9.png" /></a>
	    		<a v-else><img src="../../../../static/img/images/fx9.png"  /></a>
	    		<a @click="chat" v-if='!zuoshow2'><img src="../../../../static/img/images/fx10.png" /></a>
	    		<a v-else><img src="../../../../static/img/images/fx10.png" /></a>
	    		<a @click="dz" v-if='datalist[0].is_like==1'><img src="../../../../static/img/images/fx11.png" /></a>
	    		<a @click="dz" v-else><img src="../../../../static/img/images/fx12.png"  /></a>
	    		
	    	</div>
    	</div>
    	 <rztk  @rzUp="change" ref='child1'></rztk>
    </div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import rztk from '../../common/rztk.vue';
    export default {
    	components:{
            rztk
        },
        data: function(){
            return {
                height:0,
                height2:0,
                height3:0,
                zuoshow:false,
                zuoshow2:false,
                zuoshow3:false,
                startX:0,
              	endX:0,
              	loading:{},
              	datalist:[{
              		'head_img_s':'../../../../static/img/images/fx12.jpg',
              		'username':'12',
              		'is_code':'1',
              		'age':'23',
              		'height':'168',
              		'education':'本科',
              		'place':'北京'
              	},{
              		'head_img_s':'../../../../static/img/images/fx12.jpg',
              		'username':'12',
              		'is_code':'1',
              		'age':'23',
              		'height':'168',
              		'education':'本科',
              		'place':'北京'
              	}],
              	rzTure:false,
                
                
            }
        },
        mounted(){
        	this.loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
        	this.getNearbyUserList();
        	this.height = document.body.offsetHeight;
        	
        	setTimeout(()=>{
        		this.height2 = document.body.offsetHeight-this.$refs.fxtop.offsetHeight-50;
        		this.height3 = this.height2-this.$refs.fxbody1.offsetHeight-this.$refs.fxbody2.offsetHeight-this.$refs.fxbody3.offsetHeight-this.$refs.fxbody4.offsetHeight-20;
        	},0)
        	
        	
        },
        methods: {
        	change(val){
				this.rzTure=val;
			},
        	loadinghide(){
        		setTimeout(()=>{
        			this.height2 = document.body.offsetHeight-this.$refs.fxtop.offsetHeight-50;
        			this.height3 = this.height2-this.$refs.fxbody1.offsetHeight-this.$refs.fxbody2.offsetHeight-this.$refs.fxbody3.offsetHeight-this.$refs.fxbody4.offsetHeight-20;
        			this.loading.close();
        			
        		},1000)
        	},
        	jump2(){
        		this.$router.push({
					path: '/homePagedatil',
					query: {
						'id':this.datalist[0].auid
					}
				})
        	},
        	chat(){
        		if(this.rzTure){
					location.href='../../../../static/web/index.html?bid='+this.datalist[0].auid+'&uid='+window.uid
				}
				else{
					this.$refs.child1.handleParentClick();
				}
        	},
        	getNearbyUserList(){
        		
        		this.$http.post(this.defines.getNearbyUserList, {
						uid: window.uid ,
						type:'6',
						limit:20
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							let html_data=data.data.data.list;
							
							if(html_data.length>1){
								this.datalist=html_data;
							}
							if(html_data.length==1){
								this.datalist=html_data;
								this.datalist.push({});
							}
							console.log(html_data.length);
							this.loadinghide()
						},
						(error) => {
							console.log(error);
						}
					);
        	},
        	shoushi1(val){
        		let touch = val.targetTouches[0];
            	this.startX = touch.pageX;
        	},
        	shoushi2(val){
        		let touch = event.targetTouches[0];
            	this.endX = touch.pageX;
        	},
        	shoushi3(){
        		let nu = this.startX-this.endX;
        		if(nu>0 && !this.zuoshow2){
        			this.zuo()
        		}
        		if(nu<0 && !this.zuoshow2){
        			this.you()
        		}
        	},
            zuo(){
            	if(!this.datalist[1].head_img_s){
            		Toast('已经是推荐的最后一位用户')
            		return false;
        		}
            	this.zuoshow=true;
            	
            	setTimeout(()=>{
            		this.zuoshow=false;
            		this.zuoshow2=true;
            		if(this.datalist.length==2){
            			this.datalist.push({});
            		}
            		setTimeout(()=>{
            			this.zuoshow2=false;
            			this.datalist.splice(0,1);
            			
            		},600)
            		
            	},600)
            },
            dz(){
            	this.$http.post(this.defines.setLikes, {
						uid: window.uid ,
						b_uid:this.datalist[0].auid
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.$set(this.datalist[0],'is_like',data.data.data.status)
							}
						},
						(error) => {
							console.log(error);
						}
					);
            },
            jump(val,name){
            	this.$router.push({
        			path: '/faxian2',
        			query:{
        				'type':val,
        				'name':name
        			}
				})
            }
            
        }
    }
</script>
<style>
	.footer1{
		display: none;
	}
</style>
<style scoped>
	
	.fx_img2{
		width: 100%;
		padding:1rem 0 5px 0;
		
	}
	.fx_img2 a{
		margin: 0 2%;
	}
	.fx_img2 img{
		height: 5rem;
		
	}
	.hui{
		background: #d1d1d1 !important;
	}
	.fx_imgof{
		width: 100%;
		box-sizing: border-box;
		transform: translate(0%,0%);
    	transition: transform 0.6s;
		position: absolute;
		top: 0%;
		left: 0%;
		border-radius: 5px;
		overflow: hidden;
		z-index: 10;
		background: #fff;border: 1px solid #dbdbdf;border-radius: 1rem;
		
	}
	.zuoimg{
		transform: translate(-120%,-5%);
	}
	.zuoimg3{
		transform: translate(120%,24%);
	}
	.zuoimg2{
		opacity: 0;
		display: none;
	}
	.fx_imgd4{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
		font-size: 1.2rem;
		color: #8a8a8a;
		height: 2rem;
	}
	.fx_imgd4 p{
		text-align: right;
		font-size: 1.3rem;
		color: #42475c;
		
	}
	.fx_imgd4 i{
		font-style: normal;
		padding: 0 2px;
	}
	.fx_imgd3{
		width: 100%;
		padding-top: 0.5rem;
		font-size: 1.6rem;
		color: #505050;
		height: 2rem;
		
	}
	.fx_imgd3 p{
		font-size: 1.3rem;
	}
	.fx_imgd3 span{
	    color: #fff;
	    background: #4297ff;
	    border-radius: 3px;
	    padding: 0px 2px;
	    font-size: 12px;
	    display: inline-block;
	    height: 15px;
	    line-height: 15px;
	    margin-left: 5px;
	    white-space: nowrap;
	}
	.fx_imgd{
		
		width: 78%;
		padding: 0.5rem 11% 0 11%;
		
	}
	.fx_imgd2{
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-size:100% 100%;
	}
	.fx_imgd2 img{
		width: 100%;
		object-fit: cover;
		display: block;
		overflow: hidden;
	}
	.fx_imgd2img{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
		top: 0;
		left: 0;
	}
	.fx_title{
		text-align: center;
	    color: #b042ff;
	    font-size: 1.5rem;
	    padding: 2% 0;
	    border-bottom: 1px solid #d1d1d1;
	}
	.fx_top{
		
		width: 95%;
		padding: 1rem 2.5%;
		padding-bottom: 2rem;
		background: #fff;
		color: #505050;
		background: url('../../../../static/img/images/fx6.jpg') no-repeat bottom;
		background-size:100% ;
		
		
	}
	.fx_topd1{
		width: 20%;
		float: left;
		font-size: 1.1rem;
		line-height: 2rem;
		text-align: center;
		padding-top: 2%;
		
	}
	.fx_topd1 img{
		width: 50%;
		margin: 0 auto;
		display: block;
	}
	.fx_topd2{
		width: 24%;
		float: left;
		font-size: 1.2rem;
		text-align: center;
		
	}
	.fx_topd2 img{
		width: 80%;
		margin: 0 auto;
		display: block;
	}
	.fx_topd2 p{
		font-size: 1.2rem;
		color: #a9a9a9;
	}
	.fx_topd2 span{
		font-size: 1.2rem;
		color: #505050;
	}
	.fx_img{
		padding-top: 10px;
		box-sizing: border-box;
		width: 100%;
				background: url('../../../../static/img/images/fx8.jpg') repeat;

	}
	.imgtext{
		position: absolute;
		bottom:3%;
		padding: 10px 10px 8px 10px;
		box-sizing: border-box;
		background: #fff;
		width: 92%;
		border-radius: 1rem;
		left: 4%;
	}
</style>
